/************************************************base**********************************************/
/************************************************base**********************************************/
/************************************************base**********************************************/
input[readonly]{
    background:#f9f9f9;
    background:#f9f9f9;
}
.ml5{margin-left:5px !important;}.ml10{margin-left:10px !important;} .ml20{margin-left:20px !important;} .ml30{margin-left:30px !important;}
.mr5{margin-right:5px !important;}.mr10{margin-right:10px !important;} .mr20{margin-right:20px !important;} .mr30{margin-right:30px !important;}
.mt5{margin-top:5px !important;}.mt10{margin-top:10px !important;} .mt20{margin-top:20px !important;} .mt30{margin-top:30px !important;} .mt40{margin-top:40px!important;;}.mt50{margin-top:50px!important;;}

/*alpha*/
.alpha10{opacity: 0.1}
.alpha20{opacity: 0.2}
.alpha30{opacity: 0.3}
.alpha40{opacity: 0.4}
.alpha50{opacity: 0.5}
.alpha60{opacity: 0.6}
.alpha70{opacity: 0.7}
.alpha80{opacity: 0.8}
.alpha90{opacity: 0.9}

.b,.bold{font-weight:700;}
.c-999{color:#999 !important;}
.c-666{color:#666 !important;}
.c-333{color:#333 !important;}
.c-bbb{color:#BBB !important;}
.c-ccc{color:#CCC !important;}
.c-ddd{color:#DDD !important;}
.c-eee{color:#EEE !important;}
.c-fff{color:#FFF !important;}
.c-f40{color:#f40 !important;}.c-f60{color:#f60 !important;}.c-f90{color:#f90 !important;}
.c-yellow{color:#ff0!important;}
.c-gold{color:#fe0 !important;}.c-orange{color:#FCAE52 !important;} .c-dorange{color:#FF8C19 !important;}
.c-green{color:#259b24 !important;} .c-lgreen{color:#8bc34a !important;}
.c-red{color:#f22 !important;} .c-dred{color:#b00 !important;}
.c-blue{color:#417ff0 !important;} .c-dblue{color:#3f51b5 !important;}

.f10px{font-size:10px !important;}
.f11px{font-size:11px !important;}
.f12px{font-size:12px !important;}
.f14px{font-size:14px !important;}
.f16px{font-size:16px !important;}
.f18px{font-size:18px !important;}
.f20px{font-size:20px !important;}
.f22px{font-size:22px !important;}
.f24px{font-size:24px !important;}
.f26px{font-size:26px !important;}
.f28px{font-size:28px !important;}
.f30px{font-size:30px !important;}
.f32px{font-size:32px !important;}
.f34px{font-size:34px !important;}
.f36px{font-size:36px !important;}
.f40px{font-size:40px !important;}
.f44px{font-size:44px !important;}
.f48px{font-size:48px !important;}

.flex{display: -webkit-flex;display: flex;}
.flex .cell{-webkit-flex:1;flex:1;}
.flex1{-webkit-flex:1;flex:1;}.flex2{-webkit-flex:2;flex:2;}.flex3{-webkit-flex:3;flex:3;}.flex4{-webkit-flex:4;flex:4;}.flex5{-webkit-flex:5;flex:5;}
.flex6{-webkit-flex:6;flex:6;}.flex7{-webkit-flex:7;flex:7;}.flex8{-webkit-flex:8;flex:8;}.flex9{-webkit-flex:9;flex:9;}.flex10{-webkit-flex:10;flex:10;}
.flex-ai-fs{display: flex;-webkit-align-items:flex-start !important; align-items:flex-start !important;}
.flex-ai-c{display: flex;-webkit-align-items:center !important; align-items:center !important;}
.flex-jc-c{display: flex;-webkit-justify-content:center !important; justify-content:center !important; }
.flex-jc-fe{display: flex;-webkit-justify-content:flex-end !important; justify-content:flex-end !important; }
.flex-jc-sb{display: flex;-webkit-justify-content:space-between !important; justify-content:space-between !important;}
.flex-jc-sa{display: flex;-webkit-justify-content:space-around !important; justify-content:space-around !important; }


/*灰色背景 */
.grey-body {background-color: #f9f9f9;}
.content-page {padding:0 3vw;}
/*页面标题*/
.page-title {padding:3vmin;color:#666;font-size: 4vmin;font-weight: bold;text-align: center;}

/*top状态栏*/
.top {
    color:#fff;background:#1b1b1b;position: relative;top:0;left:0;right:0;
    padding:10px 10px;display: flex;align-items: center;justify-content: space-between
}
.top .logo{}
.top .logo img{height: 26px;}
.top .info{display: flex;align-items: center;justify-content: flex-end}
.top .info .layui-nav-img {width: 30px;height: 30px}
.top .info a{color: #ffffff;}
.top .layui-nav {padding: 0 0 !important;background:transparent}
.top .layui-nav .layui-nav-item {line-height: 1em !important;}
.top .layui-nav .layui-nav-item .layui-nav-child{top: 36px !important;}
.top .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
    height: 0px !important;}

/*面包*/
.bread-crumb {font-size:14px;padding:15px 0px;}
.bread-crumb a{color:#333;}
.bread-crumb a:after{content:' / '}
.bread-crumb .cur{color:#999;}

/*模块分割*/
.divider {height:1px;border-bottom:1px solid #ccc;;margin:5vmin 0;position: relative}
.divider span{color:#333;font-size:3vmin;display:block;padding:0 2vmin;background:#fff;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%)}

/*列表，分类与产品通用*/
.item-list {padding:0px;display:flex;align-items: center;justify-content: space-around;flex-wrap: wrap;}
.item-list .box{
    width:90%;border:0px solid red;padding:5px 10px;box-sizing: border-box;;background:#fff;
    display: flex;align-items: center;justify-content: center;flex-direction: column;
    margin:0 0 10px 0;box-shadow: 0px 14px 20px rgba(0,0,0,0.1);
    transition: all 0.2s;position: relative;
}
.item-list .box:hover{box-shadow: 0px 14px 20px rgba(0,0,0,0.3)}
.item-list .box img.own {position: absolute;left: 0px;top:0px;height:80px;z-index:1;}
.item-list .box .picture {width:70vw;height:70vw;border:0px solid blue;display: flex;align-items: center;justify-content: center;}
.item-list .box .picture img{width:70vw;max-width:70vw;max-height:70vw;}
.item-list .box .title {color:#999;font-size:16px;text-align: center;padding:0.5em 0}
.item-list .box .button {padding:5px 0;}
.item-list .box .button img{height: 30px;opacity: 0.5}


/*产品列表继承*/
.item-list.product{}
/*.item-list.product .box {width:80vw; margin:0 0 30px 0;}*/
/*.item-list.product .box:hover{}*/
/*.item-list.product .box .title {font-size:18px;font-weight: bold;padding:10px 0;}*/
/*.item-list.product .box .picture {width:70vw;height:65vw;}*/
/*.item-list.product .box .picture img{width:70vw;max-height:65vw;}*/
.item-list.product .box .price {font-size:14px;padding:15px 0px;}
.item-list.product .box .button {padding:0 0;position: absolute;right:15px;bottom:10px;}
.item-list.product .box .button img{height: 40px;opacity: 1}


/*layui reset */
.layui-field-title {margin:10px 0 15px !important;}
.layui-elem-field legend {font-size: 14px !important}
.layui-elem-field legend a {color:#999 !important;}

.layui-form {font-size: 15px;}
.layui-form-item,.layui-form-label,.layui-input-block {display: flex;align-items: center;justify-content: flex-start}
.layui-form-item {margin-bottom:10px !important}
.layui-form-item .layui-form-label {width:80px;padding:0 !important}
.layui-form-item .layui-input-block{margin-left:0 !important}
.layui-nav .layui-nav-more {top: 30% !important;}/*导航下拉菜单的箭头图标*/

/*购物车*/
.shop_cart {border:0px solid red;position: fixed;right:4vmin;bottom:4vmin;z-index: 2;text-align: right}
.shop_cart img{width:13vmin;height: 13vmin; transform: translate(0%,0%);margin:0px auto;}
.shop_cart .badge {
    font-size:3.2vmin;color:#fff;background-color: #e00;border-radius: 8vmin;padding:0.2vmin 1vmin;white-space: nowrap;
    display: inline-block;position: relative;z-index: 1;
    /*position: absolute;top:0;left:0;z-index: 1;*/
    transform: translate(0%,30%);
}
.cart-all {width: 100vw;height: 100vh;position: fixed;top:0;left:0;z-index: 3;background:rgba(255,255,255,1);}
.cart-all .top-bar {
    width:100%;height:50px;padding:0 5vmin;border-bottom: 1px solid #eee;
    /*position:absolute;left:0;top:0;z-index:1;*/
    display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;
}
.cart-all .top-bar .title{color:#666;font-size:18px;font-weight: bold;}
.cart-all .top-bar .control{}
.cart-all .top-bar .control img{width:20px;height:20px;}

.cart-all .list-wrap {height:calc(100vh - 100px); overflow-y:scroll;padding:0 15px;}
.cart-all .list-wrap .cate-title {color:#999;font-size:16px;font-weight: bold;padding:10px 0;border-bottom: 1px solid #eee;}

.cart_sku-wrap {padding:30px 0;display: flex;align-items: flex-start;justify-content: flex-start;flex-wrap: wrap;}
.cart_sku-wrap .box{width:33%;position:relative;}
.cart_sku-wrap .box .close{width:26px;height:26px;opacity:0.2;position: absolute;right: 0px;top:0px;z-index: 2;transform: translate(40%,-30%)}
.cart_sku-wrap .box .picture{
    width:28vw;height:28vw;position: relative;display: flex;align-items: center;justify-content: center;
}
.cart_sku-wrap .box .picture .cover{max-width:25vw;max-height:25vw;}
.cart_sku-wrap .box .title {
    color:#333;width:80%;font-size: 12px;font-weight: 500;
    /*overflow:hidden;text-overflow:ellipsis;white-space:nowrap;*/
}
.cart_sku-wrap .box .price{color:#e00;font-size: 12px;}

.cart-all .foot-bar {
    color:#fff;font-size:14px;font-weight: bold;height:50px;width:100%;
    position: fixed;left: 0;bottom: 0;z-index: 2;
    padding:10px 10px;box-sizing: border-box;background-color: #f70;
    display: flex;align-items: center;justify-content: space-between;
}
.cart-all .foot-bar .clear{
    color:#666;background-color: #fff;height:36px;line-height: 32px;border-radius:5px;border:none;
    padding:0 10px;box-shadow: 2px 2px 2px rgba(0,0,0,0.2)}
.cart-all .foot-bar .info {color:#fff;font-weight: bold;}



/*****************************************************************************************************/
/*****************************************************************************************************/
/*****************************************************************************************************/
@media screen and (min-width: 767px){
    .top {padding:15px 15px;}
    .top .logo{}
    .top .logo img{height: 36px;}
    .top .info .layui-nav-img {width: 40px;height: 40px}
    .top .info a{font-size: 16px;}
    .bread-crumb {font-size:18px;padding:20px 0px;}

    /*通用列表*/
    .item-list {}
    .item-list .box{width:48%;position: relative}
    .item-list .box .picture {width:44vw;height:44vw;}
    .item-list .box .picture img{width:40vw;max-height:40vw;}
    .item-list .box .title {font-size:24px;}
    .item-list .box .button {padding:10px 0;}
    .item-list .box .button img{height: 32px;}

    /*产品继承*/

    .item-list.product .box .price {font-size:14px;padding:15px 0px;}
    .item-list.product .box .button img{height: 40px;}

    /*购物车*/
    .shop_cart {right:3vmin;bottom:2vmin;}
    .shop_cart img{width:10vmin;height: 10vmin; transform: translate(0%,0%);margin:0px auto;}
    .shop_cart .badge {
        font-size:2.6vmin;border-radius: 8vmin;padding:0.2vmin 1vmin;

    }
    .cart-all {background:rgba(255,255,255,1);}
    .cart-all .top-bar {
        width:100%;height:60px;padding:0 30px;border-bottom: 2px solid #eee;

    }
    .cart-all .top-bar .title{color:#666;font-size:20px;}
    .cart-all .top-bar .control{}
    .cart-all .top-bar .control img{width:30px;height:30px;}

    .cart-all .list-wrap {height:calc(100vh - 120px); padding:0 30px;}
    .cart-all .list-wrap .cate-title {font-size:18px;padding:20px 0;border-bottom: 1px solid #ccc;}

    .cart_sku-wrap {padding:30px 0;}
    .cart_sku-wrap .box{width:25%;}
    .cart_sku-wrap .box .close{width:36px;height:36px;)}
    .cart_sku-wrap .box .picture{width:23vw;height:23vw;}
    .cart_sku-wrap .box .picture .cover{max-width:20vw;max-height:20vw;}
    .cart_sku-wrap .box .title {font-size: 16px;}
    .cart_sku-wrap .box .price{font-size: 16px;}

    .cart-all .foot-bar {font-size:16px;height:60px;padding:0 10px;}
    .cart-all .foot-bar .clear{height:36px;line-height: 32px;}
    .cart-all .foot-bar .info {}
}

@media screen and (min-width: 1024px){
    /*.bread-crumb {font-size:18px;padding:15px;}*/
    /*通用列表*/
    .item-list {}
    .item-list .box{width:32%;}
    .item-list .box .picture {width:25vw;height:25vw;}
    .item-list .box .picture img{width:23vw;max-height:25vw;}

    /*产品继承*/


    /*购物车*/


    .cart_sku-wrap {padding:30px 0;}
    .cart_sku-wrap .box{width:20%;}
    .cart_sku-wrap .box .close{}
    .cart_sku-wrap .box .picture{width:18vw;height:18vw;position: relative}
    .cart_sku-wrap .box .picture .cover{max-width:16vw;max-height:16vw;}
    .cart_sku-wrap .box .title {}
    .cart_sku-wrap .box .price{}
}


